<template>
    <div class="main">        
        <div class="top" :style="backgroundObj"></div>
        <div class="func">
            <a @click="comment" href="#text">
                <span>
                    <img src="../assets/images/comment.png" alt="">
                </span>
                <p>{{totalCom}}</p> 
            </a>
            <div>
                <span>
                    <img src="../assets/images/share.png" alt="">
                </span>
                <p>1222</p> 
            </div>
            <div>
                <span>
                    <img src="../assets/images/down.png" alt="">
                </span>
                <p>145</p> 
            </div>
            <div>
                <span>
                    <img src="../assets/images/cellect.png" alt="">
                </span>
                <p>1788</p> 
            </div>
        </div>
        <div class="content">
                <div class="left">
                    <img :src="imgUrl" alt="">
                    <p>歌单</p>
                    <span>
                        <i><img src="../assets/images/earphone.png" alt=""></i>
                        {{playNum}}
                    </span>
                </div>
                <div class="right">
                    <p>{{info}}</p>
                    <a href="#">
                        <div class="icon">
                            <span>
                                <img src="../assets/images/star.png" alt="">
                            </span>
                            <img :src="headImg" alt="">
                        </div>
                        {{name}}
                    </a>
                </div>
        </div>
        <div class="info">
          <div class="tag">
            <b>标签:</b>
            <span v-for="(item, index) in tags" :key="index">{{item}}</span>
          </div>
          <div class="intro">
            <b>简介:</b>&nbsp;
            <span>⊙</span>
          </div>
          <div class="details" :style="active">{{msg}}</div>
          <p v-show="isshow" @click="change">
            <img src="../assets/images/bottom.png" alt="">
          </p>
          <p v-show="!isshow"  @click="change">
            <img src="../assets/images/top.png" alt="">
          </p>
        </div>
        <h5 class="Title">歌曲列表</h5>
        <ul class="music-list">
          <li @click="toplay(item.id,idx)" v-for="(item, idx) in music_data" :key="idx">
            <div class="num">{{ idx+1 }}</div>
            <div class="music-msg">
              <h3>{{ item.name }}</h3>
              <!-- 再次遍历获取多个歌手的歌名 -->
              <p v-for="(item2, idx2) in item.ar" :key="idx2">{{ item2.name }}</p>
              <p>- {{ item.al.name }}</p>
            </div>
            <!-- 右侧播放按钮 -->
            <div class="play">
              <div class="circle">
                <span>▲</span>
              </div>
            </div>
          </li>
          <div class="remind" @click="toApp">点击下载APP,查看更多音乐</div>
        </ul>
        <h5 class="Title">精彩评论</h5>
         <div v-if="!show" class="loading">
            <img src="../assets/images/loading.gif" alt="">
        </div>
        <div v-else class="comment_container" v-for="(item, index) in wonderfulCom" :key="index">
          <div class="commentList">
            <div class="img">
              <img :src="item.user.avatarUrl" alt />
            </div>
            <div class="comments">
              <div class="name">{{item.user.nickname}}</div>
              <div class="time">{{time[index]}}</div>
              <p>{{item.content}}</p>
            </div>
            <div class="like">
                    <span>{{item.likedCount}}</span>
                    <span @click="like">
                        <img src="../assets/images/like.png" alt="">
                    </span>
            </div>
          </div>
        </div>
        <h5 class="Title">最新评论</h5>
        <a v-show="comonoff" class="textCon" name="text">
                <textarea name="" id=""  class="text"></textarea>
                <p @click="close">发表</p>
        </a>
        <div class="comment_container"> 
            <div class="commentList" v-for="(item, index) in (load.data)" :key="index">
                <div class="img">
                    <img :src="item.user.avatarUrl" alt="">
                </div>
                <div class="comments">
                    <div class="name">{{item.user.nickname}}</div>
                    <div class="time">{{time[index]}}</div>
                    <p>{{item.content}}</p>
                </div>
                <div class="like">
                    <span>{{item.likedCount}}</span>
                    <span @click="like">
                        <img src="../assets/images/like.png" alt="">
                    </span>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import { getComment, getPlayMusic } from "../assets/api";
export default {   
  name: "playlist",
  data() {
    return {
            //歌单详细数据
            songData:{
                playCount:[]
            },
            //图片
            imgUrl:null,
            //设置容器背景图
            backgroundObj:{
            'background':null,
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'center',
            'backgroundSize': 'cover',
            },
            //音乐简介
            info:null,
            //音乐人
            name:null,
            //小头像
            headImg:null,
            //小标签
            tags:null,
            //描述
            msg:null,
            // 音乐列表数据
            music_data: null,
            //评论数据
            comments:[],
            //总评论数
            totalCom:null,
            //触底加载数据
            load:{
                page:0,
                data:[],
                canRun:true
            },
            show:false,
            comonoff:false,
            count:1,
            isshow:true,
            active:{
               'display': '-webkit-box'
            }
        }
  },
  async created() {    
    //判断如果用户是否通过点击歌单名跳至歌单详情页还是在歌单详情页直接刷新
            if(!this.$store.state.Re_musicDataList.data){
                let reId = this.$route.query.id
                let reIdData = await getPlayMusic(reId)
                this.songData = reIdData
            }else{
                this.songData = this.$store.state.Re_musicDataList.data       
            }

            //获取点击歌单后页面需要的详细数据
            this.show = true
            this.imgUrl = this.songData.coverImgUrl
            this.backgroundObj.background = `url(${this.imgUrl})`
            this.info = this.songData.name
            this.name = this.songData.creator.nickname
            this.headImg = this.songData.creator.avatarUrl
            this.tags = this.songData.tags
            this.msg = this.songData.description
            this.music_data = this.songData.tracks
            //获取评论内容
            let id = this.songData.id;
            let data = await getComment(id)
            //获取所有评论
            this.comments = data.comments
            //获取评论总数量
            this.totalCom = data.total
            this.show = true
            //执行触底加载方法
            this.bottomLoadCal()
  },
  computed: {
    //处理点击歌单后显示播放数量
    playNum() {
      let playNum = this.songData.playCount;
      if (playNum > 100000000) {
        return Number((playNum / 100000000).toFixed(1)) + "亿";
      } else if (playNum > 10000) {
        return Number((playNum / 10000).toFixed(1)) + "万";
      } else {
        return playNum;
      }
    },
    //处理显示时间  
    time() {
      let t = this.comments.map(item => {
        let getTime = new Date(item.time);
        let y = getTime.getFullYear(getTime);
        let Mon = getTime.getMonth(getTime) + 1;
        let d = getTime.getDate(getTime);
        let h = getTime.getHours(getTime);
        let m = getTime.getMinutes(getTime);
        let s = getTime.getSeconds(getTime);
        let date = `${y}年${Mon}月${d}日${h}时${m >= 10 ? m : "0" + m}分${
          s >= 10 ? s : "0" + s
        }秒`;
        return date;
      });
      return t;
    },
    // 筛选出精彩评论
    wonderfulCom() {
      let comArr = this.comments.slice(0);
      let comSort = comArr
        .sort((a, b) => {
          return b.likedCount - a.likedCount;
        })
        .splice(0, 1);
      return comSort;
    }   
  },          
  methods: {
        toplay(id,idx) {
          var b = [];
          this.music_data.forEach(item => {
            var songs = {
              id: item.id,
              name: item.name,
              artists: this.arti(item.ar),
              picurl: item.al.picUrl
            };
            b.push(songs);
          });
          this.$store.commit("toSongList", b);
          this.$store.commit("songsIdx", idx);
        },
        //处理歌手
        arti(arr) {
            var a = [];
            arr.forEach(item =>{
                a.push(item.name);
            })
            return a;
        },
        //点赞
        like(){
            //判断如果没有登录点赞就直接跳到点赞页面
            if(!this.$store.state.isLogin){
                this.$router.push({
                    name:'Login'
                })
            }
        },
        //评论
        comment(){
            //点击评论图标在评论区显示input输入框
            this.comonoff = true
        },
        //关闭评论框
        close(){
            //点击评论区的发表关闭评论框
            this.comonoff = false
        },
        toApp(){
            this.$router.push({
                name:'Down_load'
            })
        },
        change(){
          if(this.isshow){
            this.isshow =false
            this.active = ''
          }else{
            this.isshow = true
             this.active = {
               'display': '-webkit-box'
             }
          }
        },
        //触底加载计算
        bottomLoadCal() {
          this.load.page = Math.ceil(this.comments.length / 10.0);
          this.load.data = this.comments.slice(0, 20);
          document.addEventListener("scroll", () => {
            if (this.load.canRun) {
              this.load.canRun = false;
              if (this.load.page > 1) {
                setTimeout(() => {
                  this.load.canRun = true;
                  let scrollT =
                    document.body.scrollTop || document.documentElement.scrollTop;
                  let winH = window.innerHeight;
                  //获取滚动条总长
                  let scrollH =
                    document.body.scrollHeight ||
                    document.documentElement.scrollHeight;
                  if (((scrollT + winH) / scrollH).toFixed(2) >= 0.95) {
                    this.bottomLoadGo();
                    this.load.page--;
                    this.count++;
                    // console.log("触底加载了");
                  }
                }, 500);
              }
            }
          },true);
        },
        //加载更多数据
        bottomLoadGo() {
          var middle = this.comments.slice(20*this.count, 20*this.count+10);
          // console.log(middle)
          this.load.data = this.load.data.concat(middle);
        },
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/playlist.scss";
</style>